<!-- 文字横向滚动播放 -->
<template>
	<view class='text-scroll-wrap'>
		<view class="text-content" :style="{
				transform: `translateX(${-leftMove}px)`
				}">
			<!-- <text style="display: inline-block;margin-right: 10px;">公告</text> -->
			<view v-for="(item, index) in list" :key="item.url + index" style="display: inline-block;margin-right: 10px;"
				@click="$emit('change', index);">
				<!-- <text>{{ formate(item.updatedTime) }}：</text> -->
				<text style="display: inline-block;

font-size: 24rpx;
font-family: SimHei;
font-weight: 400;
color: #89939F;">{{ item.title }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import dayjs from 'dayjs';
	export default {
		name: 'text-scroll-wrap',
		components: {},
		props: {
			list: { // 滚动列表
				type: Array,
				default: () => {
					return [];
				}
			},
			type: { // 类型
				type: String,
				default: 'text',
			},
			textKey: { // 文字key值
				type: String,
				default: ''
			},
			imageKey: { // 图片key值
				type: String,
				default: ''
			},
			actives: { // 如果需要，此为已选列表
				type: Array,
				default: () => {
					return [];
				}
			},
			duration: { // 间隔时间
				type: [Number, String],
				default: 20
			},
			delay: { // 延迟时间
				type: [Number, String],
				default: 0
			},
			initPosition: { // 初始位置
				type: String,
				default: 'left',
				validator: (value) => {
					return ['left', 'right'].indexOf(value) !== -1;
				}
			}
		},
		data() {
			return {
				myList: [],
				leftMove: 0,
				wrapWidth: 0,
				task: null,
			};
		},
		// 组件实例化之前
		beforeCreate() {},
		// 组件创建完成
		created() {
			this.myList = this.list;
		},
		// 组件挂载之前
		beforeMount() {},
		// 组件挂载之后
		mounted() {
			setTimeout(() => {

			}, 2000);
		},
		// 组件数据更新时
		beforeUpdate() {},
		// 组价更新
		updated() {},
		// 组件销毁前
		beforeDestroy() {},
		// 组件销毁后
		destroyed() {},
		// 页面方法
		watch: {
			list() {
				setTimeout(() => {
					this.$nextTick(() => {
						this.update();
					});
				}, 200);
			}
		},
		methods: {
			update() {
				let query = uni.createSelectorQuery().in(this);
				query.select('.text-content').boundingClientRect(data => {
					this.wrapWidth = data.width;
					// console.log('this.wrapWidth', this.wrapWidth);
					this.scrollContent();
				}).exec();
			},
			formate(date) {
				return dayjs(date, 'YYYY-MM-DD hh:mm:ss').format('MM-DD');
			},
			// 点击此项
			clickThis(e) {
				// console.log(e.currentTarget.dataset.text);
				this.$emit('change', e.currentTarget.dataset.text);
			},
			// 滚动
			scrollContent() {
				if (this.task) {
					clearInterval(this.task);
				}
				this.task = setInterval(() => {
					if (this.wrapWidth > this.leftMove) {
						this.leftMove++;
					} else {
						this.leftMove = 0;
					}
				}, 32);
			}
		}
	};
</script>

<style lang='scss'>
	.text-scroll-wrap {
		overflow-x: hidden;
		overflow-y: hidden;
		width: 100%;
		height: 68rpx;
		line-height: 68rpx;
		position: relative;
		white-space: nowrap;
		z-index: 100;
		padding: 0;
		margin-right: 10px;

		.text-content {
			display: inline-block;
			white-space: nowrap;
		}
	}
</style>
